<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/webgl-utils.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

<script id="2d-vertex-shader" type="x-shader/x-vertex">
  attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
  </script>
  
  <script id="2d-fragment-shader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0, 1, 0, 1);  // green
  }
  </script> 

<script>
  // https://www.w3cschool.cn/webgl/i4gf1oh1.html
debugger
  // 获取webGL上下文
 const  canvas = document.getElementById("canvas");
 const  gl = canvas.getContext("experimental-webgl");

  // setup a GLSL program
 const  program = createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
 gl.useProgram(program);


 // look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
 
 // Create a buffer and put a single clipspace rectangle in
 // it (2 triangles)
 var buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 gl.bufferData(
 gl.ARRAY_BUFFER,
 new Float32Array([
 -1.0, -1.0,
  1.0, -1.0,
 -1.0,  1.0,
 -1.0,  1.0,
  1.0, -1.0,
  1.0,  1.0]),
 gl.STATIC_DRAW);
 gl.enableVertexAttribArray(positionLocation);
 gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
  
 // draw
 gl.drawArrays(gl.TRIANGLES, 0, 6);   
</script>


<!-- 
  这里关于webGL是如何进行学习？
  上面的代码中其实是有很多的东西的，
  首先获取gl上下文:
  
-->